<template>
	<view class="container">
		<scroll-view class="order-container" :style="{ height : scrollHeight + 'vh' }" scroll-y="true"
			scroll-with-animation="true">
			<view class="order-item" v-for="(item, index) in orderData" :key="item.id">
				<!-- 运输中 -->
				<OrderInTransit v-if="item.type == 1" class="order-item-container" :itemData="item" />
				<!-- 询价中 -->
				<OrderInquiry v-if="item.type == 2" class="order-item-container" :itemData="item" />
				<!-- 已报价 -->
				<OrderQuoted v-if="item.type == 3" class="order-item-container" :itemData="item" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import OrderInquiry from '@/pages/tabBar/order/original/OrderInquiry.vue'
	import OrderInTransit from '@/pages/tabBar/order/original/OrderInTransit.vue'
	import OrderQuoted from '@/pages/tabBar/order/original/OrderQuoted.vue'
	export default {
		components: {
			OrderInquiry,
			OrderInTransit,
			OrderQuoted
		},
		data() {
			return {
				scrollHeight: '82',
				orderData: [],
			}
		},
		onLoad() {

		},
		methods: {
			requestOrderData(tabId) {
				this.tabId = tabId
				switch (tabId) {
					case 0:
						this.scrollHeight = '82',
							this.orderData = [{
								id: 0,
								type: 1,
								open: false,
							}, {
								id: 1,
								type: 1,
								open: false,
							}, {
								id: 2,
								type: 1,
								open: false,
							}, {
								id: 3,
								type: 1,
								open: false,
							}, {
								id: 4,
								type: 1,
								open: false,
							}]
						break
					case 1:
						this.scrollHeight = '82',
							this.orderData = [{
								id: 0,
								type: 2,
								open: false,
							}, {
								id: 1,
								type: 2,
								open: false,
							}, {
								id: 2,
								type: 2,
								open: false,
							}, {
								id: 3,
								type: 2,
								open: false,
							}, {
								id: 4,
								type: 2,
								open: false,
							}]
						break
					case 2:
						this.scrollHeight = '77.5',
							this.orderData = [{
								id: 0,
								type: 3,
								open: false,
							}, {
								id: 1,
								type: 2,
								open: false,
							}, {
								id: 2,
								type: 1,
								open: false,
							}]
						break
					default:
						this.orderData = []
						break
				}
			},
		},
	}
</script>

<style>
	.container {
		flex-grow: 1;
		position: relative;
	}

	.order-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.order-item {
		margin-bottom: 10px;
		background-color: white;
		border-radius: 20rpx;
		justify-content: center;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;
	}

	.order-item-container {
		width: 100%;
	}
</style>